<template>
  <div class="ErrandDeliveryInformation" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead :title="this.$route.query.type == 1?'完善收货信息':'完善发货信息'"></myHead>
    <div class="wrap">
      <div class="tit">{{this.$route.query.type == 1?'完善收货信息':'完善发货信息'}}</div>
      <div class="item">
        <div class="item-l">
          <img src="../../../static/img/pt001.png" alt="">
        </div>
        <input type="text" :placeholder="this.$route.query.type == 1?'收货人联系电话':'发货人联系电话'">
      </div>
      <div class="item">
        <div class="item-l">
          <img src="../../../static/img/pt002.png" alt="">
        </div>
        <input type="text" :placeholder="this.$route.query.type == 1?'收货人姓名':'发货人姓名'">
        <div class="item-r">
          <p @click="sex = 0"><img :src="sex==0?'../../../static/img/cz002.png':'../../../static/img/cz003.png'" alt=""><span>男</span>
          </p>
          <p @click="sex = 1"><img :src="sex==1?'../../../static/img/cz002.png':'../../../static/img/cz003.png'" alt=""><span>女</span>
          </p>
        </div>
      </div>
      <div class="item" @click="jump('RunForGoods')">
        <div class="item-l">
          <img src="../../../static/img/pt003.png" alt="">
        </div>
        <p>{{addressVal==''?'点击选择位置':addressVal}}</p>
      </div>
      <div class="item">
        <div class="item-l">
          <img src="../../../static/img/pt004.png" alt="">
        </div>
        <input type="text" placeholder="具体楼层门牌号">
      </div>
    </div>
    <div class="btn">保存</div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "ErrandDeliveryInformation",
    components: {
      myHead
    },
    data() {
      return {
        sex: 0,
        addressVal:''
      }
    },
    mounted() {
      Bus.$on('hair',(data)=>{
        console.log(data)
        this.addressVal = data.index;
        this.test(data.index)
        console.log(this.addressVal)
        Bus.$off('hair')
      })
    },
    methods: {
      jump(page) {
        this.$router.push({
          name: page,
          query:{
            type:this.$route.query.type
          }
        })
      },
      test(x){
        this.addressVal = 8888;
        this.sex = 1;
        console.log(x)
      }
    },
    watch:{
      addressVal(){
        console.log(this.addressVal,8888)
      },
      sex(){
        console.log(this.sex,888)
      }
    },
  }
</script>

<style scoped>
  .ErrandDeliveryInformation {
    box-sizing: border-box;
    padding-top: .5rem;
  }

  .wrap {
    padding: .15rem;
    margin-bottom: .3rem;
  }

  .tit {
    height: .65rem;
    line-height: .5rem;
    font-size: .24rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    border-bottom: .01rem solid #F6F6F6;
  }

  .item {
    height: .5rem;
    box-sizing: border-box;
    border-bottom: .01rem solid #F6F6F6;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
  }

  .item > input {
    width: 2rem;
    border: none;
    outline: none;
  }

  .item > input::placeholder {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .item-l {
    width: .14rem;
    margin-right: .15rem;
  }

  .item-l > img {
    width: 100%;
    max-height: .15rem;
  }

  .item-r {
    position: absolute;
    right: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    float: right;
  }

  .item-r > p {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-left: .1rem;
  }

  .item-r > p > img {
    width: .12rem;
    max-height: .12rem;
    margin-right: .05rem;
  }

  .item > p > span {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .btn {
    width:3.4rem;
    height:.5rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.24rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
    text-align: center;
    line-height: .5rem;
    margin: .1rem auto;
  }
</style>
